<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    title="密码"
    dialogWidth="400px"
    :form="form"
    :formHeader="formHeader"
    :url="$urls.API_URL_BACKSTAGE_USER_PASSWORD_EDIT"
    action="patch"
    @afterSubmitSuccess="afterSubmitSuccess"
  >
    <!--    <template #name>
          <el-input
            v-model="roleForm['name']"
            clearable/>
        </template>-->
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';
import {
  computed,
  defineExpose, defineProps, getCurrentInstance, reactive, ref, withDefaults,
} from 'vue';
import { TableColumn, FormHeader } from '@/types/interface/base_interface';
import { Role, UserPassword } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();

// 表单对象
const form = ref<UserPassword>({
  password: '',
  newPassword: '',
  confirmPassword: '',
});
// 密码验证规则
const validateConfirmPass = (rule: any, value: any, callback: any) => {
  if (value !== form.value?.newPassword) {
    callback(new Error('确认密码必须与原密码一致'));
  } else {
    callback();
  }
};

// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '原密码',
    prop: 'password',
    type: 'password',
    rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
  },
  {
    label: '新密码',
    prop: 'newPassword',
    type: 'password',
    rules: [
      { required: true, message: '不能为空', trigger: 'blur' },
      {
        min: 6, max: 20, message: '密码长度必须在6-20位之间', trigger: 'blur',
      },
    ],
  },
  {
    label: '确认密码',
    prop: 'confirmPassword',
    type: 'password',
    rules: [
      { required: true, message: '不能为空', trigger: 'blur' },
      { validator: validateConfirmPass, trigger: 'blur' },
    ],
  },
]);
// 表单ref对象
const addOrEditDialogRef = ref(); // 表单ref对象
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = () => {
  addOrEditDialogRef.value!.openDialog();
};
// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  addOrEditDialogRef.value!.closeDialog();
};
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>

</style>
